import '@/assets/css/LoginAndRegisterView.css'

import { loginAndRegisterApi } from '../api/loginAndRegisterApi'
import { setCookie } from '@/utils/cookie'

export default {
  name: 'LoginAndRegisterView',
  data() {
    return {
      isLogin: true,
      captchaImage: '',
      captchaKey: '',
      captchaLoading: false,
      loginForm: {
        gitUsername: '',
        password: '',
        verificationCode: '',
        remember: false,
      },
      registerForm: {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        agree: false,
      },
    }
  },
  methods: {
    handleLogin() {
      const { gitUsername, password, verificationCode } = this.loginForm
      loginAndRegisterApi.login(gitUsername, password, verificationCode).then((response) => {
        if (response !== null && response !== '') {
          // 登录成功，用户信息会通过 Session Cookie 自动维护
          this.$message.success('登录成功')
          console.log('登录成功:', response)

          setCookie('userToken', response.token, 1 / 12)
          setCookie('user', JSON.stringify(response.user), 1 / 12)
          setCookie('key', response.key, 1 / 12)
          // setCookie('userToken', response.token, 1 / (24 * 60 * 12))
          this.$router.push('/main')
        } else {
          this.$message.warning('登录失败')
        }
      })
    },
    handleRegister() {
      // console.log('注册信息:', this.registerForm)
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        this.$message.error('两次输入的密码不一致')
        return
      }
      const { username, email, password } = this.registerForm
      loginAndRegisterApi.login(username, password).then((response) => {
        if (response !== null) {
          this.registerForm.username = ''
          this.$message.warning('用户已存在')
          return
        }
      })
      loginAndRegisterApi
        .register(username, email, password)
        .then((response) => {
          if (response === true) {
            this.$message.success('注册成功')
            this.loginForm.gitUsername = this.registerForm.username
            this.loginForm.password = this.registerForm.password
            this.isLogin = true
          } else {
            this.$message.error('注册失败')
          }
        })
        .catch((error) => {
          this.$message.error('注册失败: ' + error.message)
        })
    },
    async getCaptcha() {
      this.captchaLoading = true
      try {
        const response = await loginAndRegisterApi.getVerificationCode()

        // 验证响应数据是否为 Blob
        if (response.data instanceof Blob) {
          this.captchaImage = URL.createObjectURL(response.data)
        } else {
          console.error('验证码响应数据格式错误:', response.data)
        }
      } catch (error) {
        console.error('获取验证码失败:', error)
      } finally {
        this.captchaLoading = false
      }
    },
    refreshCaptcha() {
      this.getCaptcha()
    },
  },

  mounted() {
    document.title = 'LoginAndRegister'
    this.getCaptcha()
  },
}
